<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<div id="all" >
	<style type="text/css">
		img{
			width: 150px;
			height: 150px;
			cursor: pointer;
		}
	</style>
	<script src="${pageContext.request.contextPath}/erp/js/showImg.js" type="text/javascript"></script>
  <div id="add_div_body">
 		<form  action="${pageContext.request.contextPath}/station/add" id="add_station_form" method="post" id="add_station_form"
 		 class="pageForm required-validate" onsubmit="return iframeCallback(this,navTabAjaxDone);" enctype="multipart/form-data">
 			<div layouth="56" class="pageFormContent" style="height: 150px; ">
				<p>
					<label>总部编码：</label>
					<input type="text" readonly="readonly" id="hqId" name="hqId" value="${hqId }"/>
				</p>
				<p>
					<label>总部名称：</label>
					<input type="text" readonly="readonly" id="hqName" name="hqName" value="${hqName }"/>
				</p>
				<p>
					<label>油站站点名称：</label>
					<input type="text" size="20" class="required textInput" name="stationName" id="stationName">
				</p>
				<p>
					<label>营业执照名称：</label>
					<input type="text" size="20" class="required textInput" name="registeredName" id="registeredName">
				</p>
				<p>
					<label>营业执照编号：</label>
					<input type="text" size="20" class="required textInput" name="registeredNumber" id="registeredNumber">
				</p>
				<p>
					<label>法人/代理人：</label>
					<input type="text" size="20" class="required textInput" name="legalRepresentative" id="legalRepresentative">
				</p>
				<p>
					<label>联系人：</label>
					<input type="text" size="20" class="required textInput" name="contactsName" id="contactsName">
				</p>
				<p>
					<label>电话：</label>
					<input type="text" size="20" class="required textInput" name="phoneNum" id="phoneNum">
				</p>
<!-- 				<p> -->
<!-- 					<label>地址：</label> -->
<!-- 					<input type="text" size="20" class="required textInput" name="address" id="address"> -->
<!-- 				</p> -->
				<p>
					<label>邮箱：</label>
					<input type="text" size="20" class="required textInput" name="email" id="email">
				</p>
				<p>
					<label>油枪数量：</label>
					<input type="text" size="20" class="required textInput" name="fpCnt" id="fpCnt">
				</p>
				<p>
					<label>油机数量：</label>
					<input type="text" size="20" class="required textInput" name="dispenserCnt" id="dispenserCnt">
				</p>
				<p>
					<label>油机品牌：</label>
					<input type="text" size="20" class="required textInput" name="dispenserBrand" id="dispenserBrand">
				</p>
<!-- 				<p> -->
<!-- 					<label>password：</label> -->
<!-- 					<input type="text" size="20" class="textInput" name="password" id="password"> -->
<!-- 				</p> -->
				<p>
					<label>备注：</label>
					<input type="text" size="20" class="textInput" name="memo" id="memo">
				</p>
				<p style="width: 500px;">
					<label>地址：</label>
			           <select data-placeholder="省份" id="provinceId" name="provinceId" class="select" >
			           </select>
			           <input type="hidden" size="15" class="textInput" name="province" id="province">
			           <select data-placeholder="城市" name="cityId" id="cityId" class="form-control" data-rel="chosen">
			           		<option>选择城市</option>
			          	</select>
			          	<input type="hidden" size="15" class="textInput" name="city" id="city">
	<!-- 		           <select data-placeholder="区域" name="area" id="areaId" class="form-control" data-rel="chosen"> -->
	<!-- 		               <option>选择区域</option> -->
	<!-- 		           </select> -->
				</p>
				<p style="width: 200px;">
			      <input id="address" name="address" class="required textInput" type="text" value="" />
				</p>
				<div class="divider"></div>
				<p style="height: 150px;">
					<label>油站外观：</label>
					<img src="${pageContext.request.contextPath}/images/upload.png" name="StationAppearance_img" id="StationAppearance_img" onclick="show_img.open_file('saImg')">
					<input style="display: none" type="file" id="saImg" name="saImg" onchange="show_img.change('saImg','StationAppearance_img')"/>
				</p>
				<p style="height: 150px;">
					<label>收银台：</label>
					<img src="${pageContext.request.contextPath}/images/upload.png" name="cashierDesk_img" id="cashierDesk_img" onclick="show_img.open_file('cdImg')">
	 				<input type="file" style="display: none" id="cdImg" name="cdImg" onchange="show_img.change('cdImg','cashierDesk_img')"/>
	 					
				</p>
				<p style="height: 150px;">
					<label>加油机：</label>
					<img src="${pageContext.request.contextPath}/images/upload.png" name="tanker_img" id="tanker_img" onclick="show_img.open_file('tankerImg')">
	 				<input type="file" style="display: none" id="tankerImg" name="tankerImg" onchange="show_img.change('tankerImg','tanker_img')"/>
				</p>
				<p style="height: 150px;">
					<label>门牌号：</label>
					<img src="${pageContext.request.contextPath}/images/upload.png" name="houseNumber_img" id="houseNumber_img" onclick="show_img.open_file('hnImg')">
	 				<input type="file" style="display: none" id="hnImg" name="hnImg" onchange="show_img.change('hnImg','houseNumber_img')"/>
				</p>
				
				<p style="height: 150px;">
					<label>便利店：</label>
					<img src="${pageContext.request.contextPath}/images/upload.png" name="CVS_img" id="CVS_img" onclick="show_img.open_file('CVSImg')">
	 				<input type="file" style="display: none" id="CVSImg" name="CVSImg" onchange="show_img.change('CVSImg','CVS_img')"/>
				</p>
				<p style="height: 150px;">
					<label>洗手间：</label>
					<img src="${pageContext.request.contextPath}/images/upload.png" name="WC_img" id="WC_img" onclick="show_img.open_file('WCImg')">
	 				<input type="file" style="display: none" id="WCImg" name="WCImg" onchange="show_img.change('WCImg','WC_img')"/>
				</p>
				<p style="height: 150px;">
					<label>洗车间：</label>
					<img src="${pageContext.request.contextPath}/images/upload.png" name="CW_img" id="CW_img" onclick="show_img.open_file('CWImg')">
	 				<input type="file" style="display: none" id="CWImg" name="CWImg" onchange="show_img.change('CWImg','CW_img')"/>
				</p>
				<p style="height: 150px;">
					<label>维修间：</label>
					<img src="${pageContext.request.contextPath}/images/upload.png" name="repair_img" id="repair_img" onclick="show_img.open_file('repairImg')">
	 				<input type="file" style="display: none" id="repairImg" name="repairImg" onchange="show_img.change('repairImg','repair_img')"/>
				</p>
					
			</div>
	 			<div class="formBar">
				<ul>
					<li><div class="buttonActive"><div class="buttonContent"><button type="button" onclick="add_station.from_submit()">保存</button></div></div></li>
					<li>
						<div class="button"><div class="buttonContent"><button class="close" type="button">取消</button></div></div>
					</li>
				</ul>
			</div>
 		</form>
  </div>
  <script Charset="UTF-8" type="text/javascript">
  var from = $("#add_station_form");
  var add_station = {
			from_submit:function (){  
			var provinceId =  $(from).find("#provinceId").val();
			var cityId =  $(from).find("#cityId").val();
			if(provinceId == ""){
				alertMsg.error("省份不能为空");
				return false;
			}
			if(cityId == ""){
				alertMsg.error("城市不能为空");
				return false;
			}
			$(from).submit(); 
		    
		},
		list_city:function () {
     	 $(from).find("#province").val($(from).find("#provinceId").find("option:selected").text());
			var provinceId =  $(from).find("#provinceId").val()
           var result = "<option value=''>选择城市</option>";
			if(provinceId == ""){
			 $(from).find("#cityId").html('');
			 $(from).find("#cityId").append(result);
				return;
			}
     	$.post("${pageContext.request.contextPath}/address/listCity",{provinceId:$(from).find("#provinceId").val()}, 
			   function(data){
	    		 if(data.code == 200){
	                    $.each(data.list,function(n,value){
	                    	 result +="<option value='"+value.cityId+"'>"+value.city+"</option>";
	                    });
	                    $(from).find("#cityId").html('');
	                    $(from).find("#cityId").append(result);
	                }
			   });
     }
	};
    
	$(function(){
		$.post("${pageContext.request.contextPath}/address/listProvinces",
				
 			   function(data){
   		 		if(data.code == 200){
                   var result = "<option value=''>选择省份</option>";
                   $.each(data.list,function(n,value){
                       result +="<option value='"+value.provinceId+"'>"+value.province+"</option>";
                   });
                   $(from).find("#provinceId").html('');
                   $(from).find("#provinceId").append(result);
                   add_station.list_city()
               }
 		});
		    	
	   	 $(from).find("#provinceId").change(function(){add_station.list_city()});
	   	 $(from).find("#cityId").change(function () {
	   		 $(from).find("#city").val( $(from).find("#cityId").find("option:selected").text());
//	 	        	$.post("${pageContext.request.contextPath}/address/listAreas",{cityId:$("#cityId").val()}, 
//	        			   function(data){
//	     	    		 if(data.code == 200){
//	     	                    var result = "<option>选择区域</option>";
//	     	                    $.each(data.list,function(n,value){
//	     	                    	console.debug(value.areaId);
//	     	                    	result +="<option value='"+value.areaId+"'>"+value.area+"</option>";
//	     	                    });
//	    				    		 $("#areaId").html('');
//	 	                   		 $("#areaId").append(result);
//	     	                }
//	        			   });
        });

	});
	
	
	</script>
</div>